<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>首页</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/commons.css}"/>
    <link rel="stylesheet" th:href="@{/css/index.css}"/>
</head>
<body>

<div th:replace="commons/bar::#header(activeUrl='index.html')"></div>

<div  class="navbar container" id="app" >
    <div class="container_main list-group-item">
        <div class="navbar main-title">
            <span class="navbar-left main-title-left">博客</span>
            <div class="navbar-right main-title-right">共<span >{{blogsInfo.total}}</span>篇</div>
        </div>
        <div>
            <div class="neirong" v-for="(blogs,index) in blogsInfo.list" @click="details(blogs.id)">
                <h3 style="font-weight: bold;">{{blogs.title}}</h3>
                <div class="neirong_top navbar " style=" width: 100%;">
                    <span class="left-span navbar-left " >{{blogs.content}}</span>
                    <img :src="blogs.path" class="img-rounded right-img navbar-right"/>
                </div>
                <div class="neirong_bottom">
                    <img :src="blogs.user.icon" class="img-rounded left-img"/>
                    <span>{{blogs.user.username}}</span>
                    <span>{{blogs.time}}</span>
                    <i class="glyphicon glyphicon-eye-open"></i>
                    <span>{{blogs.browse==null?0:blogs.browse}}</span>
                    <span class="renzheng img-rounded navbar-right">认证</span>
                </div>
                <hr>
            </div>
        </div>

        <nav aria-label="..." class="main-pages">
            <ul class="pager">
                <li id="prev" :class="['previous',blogsInfo.pageNum==1?'disabled':'']"><a @click.prevent="prev"><span aria-hidden="true">&larr;</span> 上一页</a></li>
                <li id="next" :class="['next',blogsInfo.pageNum==blogsInfo.pages?'disabled':'']"><a @click.prevent="next">下一页 <span aria-hidden="true">&rarr;</span></a></li>
            </ul>
        </nav>


    </div>

    <div class="main_right navbar-right">
        <div class="container_fenlei list-group-item">
            <div class="navbar main-title">
                <span class="navbar-left main-title-left">分类</span>
                <div class="navbar-right main-title-right"><a  href="###" class="gengduo">更多</a></div>
            </div>
            <div>
                <ul class="list-group">
                    <li v-for="(classify,index) in classifyList.list" class="list-group-item" @click="show('classify.html',classify.id)">
                        <span class="badge">查看</span>
                        {{classify.name}}
                    </li>
                </ul>
            </div>
        </div>

        <div class="container_fenlei list-group-item">
            <div class="navbar main-title">
                <span class="navbar-left main-title-left">标签</span>
                <div class="navbar-right main-title-right"><a  href="###" class="gengduo">更多</a></div>
            </div>
            <div>
                <ul class="list-group">
                    <li v-for="(tag,index) in tagList.list" class="list-group-item" @click="show('tag.html',tag.id)">
                        <span class="badge">查看</span>
                        {{tag.name}}
                    </li>

                </ul>
            </div>
        </div>

<!--        <div cl..ass="container_fenlei list-group-item">-->
<!--            <div class="navbar main-title">-->
<!--                <span class="navbar-left main-title-left">归档 </span>-->
<!--                <div class="navbar-right main-title-right"><a  href="###" class="gengduo">更多</a></div>-->
<!--            </div>-->
<!--            <div>-->
<!--                <ul class="list-group">-->
<!--                    <li class="list-group-item">-->
<!--                        <span class="badge">查看</span>-->
<!--                        学习-->
<!--                    </li>-->
<!--                    <li class="list-group-item">-->
<!--                        <span class="badge">查看</span>-->
<!--                        思考-->
<!--                    </li>-->
<!--                    <li class="list-group-item">-->
<!--                        <span class="badge">查看</span>-->
<!--                        创业-->
<!--                    </li>-->
<!--                </ul>-->
<!--            </div>-->
<!--        </div>-->

    </div>

</div>

<div th:replace="commons/bar::#footer"></div>


<script th:src="@{/js/jquery.min.js}"/>
<script th:src="@{/lib/vue/vue.min.js}"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<!--<script type="application/javascript" th:src="@{/lib/vue/vue.min.js}"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<!--<script th:src="@{/js/axios.min.js}"></script>-->
<script th:src="@{/js/bootstrap.min.js}"></script>


<script>

    var vue = new Vue({
        el:"#app",
        data(){
            return{
                classifyList:[],
                tagList:[],
                blogsInfo:[]
            }
        },
        methods:{
            ajax:function(url,vari,data){
                var that = this;
                $.ajax({
                    type:"get",
                    url:url,
                    dataType:"json",
                    contentType:"application/json;charset=utf-8",
                    data:data,
                    success:function(res){
                        that[vari] = res;
                    },
                    error:function(res){
                        console.log(res);
                    }
                })
            },
            details:function(id){
                window.location.href="details.html?active="+id;
            },
            next:function(){
                if(this.blogsInfo.pageNum+1<=this.blogsInfo.pages){
                    var that = this;
                    this.ajax("/blogs/blogs","blogsInfo",{page:that.blogsInfo.nextPage,size:5,title:null,classifyId:0,tagId:0,recommend:0})
                }

            },
            prev:function(){
                if(this.blogsInfo.pageNum-1>0){
                    var that = this;
                    this.ajax("/blogs/blogs","blogsInfo",{page:that.blogsInfo.prePage,size:5,title:null,classifyId:0,tagId:0,recommend:0})
                }
            },
            show:function(uri,id){
                window.location.href = uri+"?active="+id;
            }
        },
        created(){
            this.ajax("/blogs/tag","tagList",{page:1,size:3});
            this.ajax("/blogs/classify","classifyList",{page:1,size:3});
            this.ajax("/blogs/blogs","blogsInfo",{page:1,size:5,title:null,classifyId:0,tagId:0,recommend:0})
            var that = this;
            $(function(){
                $("#searchForm").submit(function () {
                    that.ajax("/blogs/blogs","blogsInfo",{page:1,size:5,title:$("#search").val(),classifyId:0,tagId:0,recommend:0})
                    return false;
                })
            })
        }
    })

</script>

</body>
</html>